<template>
  <div class="christmas">
    <div class="headtitle" :class="{ fixed: fixed }">
      <div class="back">
        <van-icon class="arrow-left" name="arrow-left" @click="$router.push('/home')" />
      </div>
      <div class="title-tabs" v-show="fixed">
     圣诞狂欢
        </div>
    </div>
    <div class="bgimg">
     
      <img
        src="http://www.higuang365.com/public/images/common/activity/christmas/bg1.png?12345678"
      />
      <img
        class="lamp"
        src="http://www.higuang365.com/public/images/common/activity/christmas/lamp.gif"
      />
    </div>
    <div class="goodsList">
      <div class="content">
        <div class="good-list-box">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              v-model:error="error"
              error-text="服务器累了，点击重新加载"
              finished-text="  "
              offset="500"
              @load="onLoad"
              :key="2"
            >
              <div class="good-list">
                <div
                  class="good-item"
                  v-for="(value, index) in items"
                  :key="index"
                  :sku="value.F_ProductId"
                  :hei="index"
                >
                  <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
                  <div
                    class="good-card"
                    @click="
                      $router.push({
                        path: '/product',
                        query: { id: value.F_ProductId, parents_id: username },
                      })
                    "
                  >
                    <van-image
                      class="product-img lazy-img"
                      :show-loading="false"
                      lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url"
                    />
                    <div class="good-desc">
                 
                      <div class="price-box">
                        <div class="price-title">
                          <div class="price-christmas">圣诞价:</div>
                          <div class="estimate">原价:{{ value.F_Price }}</div>
                        </div>

                        <div class="price">{{ value.F_BdPrice }}</div>
                        <span class="yuan">元</span>
                        <img
                          class="timelimit"
                          src="http://www.higuang365.com/public/images/common/activity/christmas/cart.png"
                        />
                        <!-- <span class="tobuys">立即购买</span> -->
                      </div>

                      <div
                        class="share"
                        @click.stop="
                          addGoodsCart(value.F_yuliu3, value.F_ProductId)
                        "
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onActivated,
  nextTick,
  onDeactivated,
} from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default defineComponent({
  name: "peoplebuy",
  setup() {
    const data = reactive({
      items: [],
      error: false,
      loading: false,
      fixed: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize: 50,
      username: getCookie("S[MEMBER]"),
    });
    nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
        data.fixed = Math.abs(Math.round(scrollTop)) < 300 ? false : true;
      });
    });
    const onLoad = async () => {
      data.loading = true;
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: "51",
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.items.push(...res[1]);
      data.loading = false;
      data.pageNum += 1;
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
    };
    const onRefresh = () => {
      data.items = [];
      data.pageNum = 1;
      data.finished = false;
      onLoad();
    };
    let giftBagScroll = 0;
    onActivated(() => {
      if (data.items.length == 0) {
        onLoad();
      }
      document.getElementById("app").scrollTop = giftBagScroll;
    });
    onDeactivated(() => {
      giftBagScroll = document.getElementById("app").scrollTop;
    });
    return { ...toRefs(data), addGoodsCart, onLoad, onRefresh };
  },
});
</script>

<style lang="scss" scoped>
.christmas {
  min-height: 100vh;
  background-color: rgb(177,1,3);
  img {
    display: block;
  }
  // background: url(http://www.higuang365.com/public/images/common/activity/christmas/bg.png?123)
  //   no-repeat;
  // background-size: contain;
  // img {
  //   display: block;
  // }

  .headtitle {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    z-index: 200;
    color: #fff;
    // background: url("http://higuang365.com/public/images/common/promotion/xianshi.jpg")
    //   no-repeat;
    // background-size: cover;
  }
  .back {
    position: absolute;
    left: 2rem;
    top: 0.5rem;
 
    font-size: 2.4rem;
    .arrow-left{
      color:rgba($color: #ffffff, $alpha: 1.0);
     
    }
  }
  .title-tabs {
    margin: 0.5rem auto;
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    letter-spacing:3px
  }
  .fixed {
    // background-image: url("http://www.higuang365.com/public/images/common/promotion/news2.jpg");
    // background-size: cover;
    background-color:#9e0000;
    transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  }
}
.bgimg {
  position: relative;
  .lamp {
    position: absolute;
    height: 10rem;
    bottom: -4rem;
    margin: auto;
    left: 0;
    right: 0;
  }
}
.goodsList {
  padding: 0.5rem 0 3rem;
  background: url(http://www.higuang365.com/public/images/common/activity/christmas/bg2.png);
  background-size: contain;
  .good-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
  }
  .good-item {
    box-sizing: border-box;
    width: calc(50vw - 2.6rem);
    margin: 0.5rem 0.1rem;
    border-radius: 1rem;
    overflow: hidden;
    animation: jello-horizontal 1s both;
    background: url("http://www.higuang365.com/public/images/common/activity/christmas/border.png")
      no-repeat;
    background-size: 100% 100%;
    .good-card {
      display: flex;
      flex-direction: column;
      border: 0.9rem solid transparent;
    }
    .product-img {
      display: block;
      min-width: calc(50vw - 4.4rem);
      width: calc(50vw - 4.4rem);
      height: calc(50vw - 4.4rem);
    }
    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex-grow: 1;
      text-align: left;
      font-size: 1.2rem;
      position: relative;
      background: #d20a0c;

      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        font-size: 1.3rem;
        // height: 3.2rem;
        line-height: 2rem;
        letter-spacing: 0.5px;
        margin-top: 2px;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price-box {
        display: flex;
        color: #fff;
        align-items: center;
      }

      .price {
        font-size: 2.4rem;
        // color: #ff0036;
        color: #fff;
        font-weight: bold;
        line-height: 2.5rem;
        margin-left: -0.6rem;
        letter-spacing: -1px;
        span {
          font-size: 1.7rem;
        }
      }

      .timelimit {
        //     width: 3rem;
        // text-align: center;
        // background: #f20c29;
        // border-radius: 50%;
        // height: 3rem;
        // border: 3px solid #febe93;
        // color: #fff;
        // min-width: 3rem;
        // position: absolute;
        // right: -.3rem;
        // transform: scale(.65);
        // padding: .4rem;
        // text-align: center;
        width: 3rem;
        height: 3.2rem;
        min-width: 3.2rem;
        position: absolute;
        right: 0.2rem;
      }
      .tobuys {
        display: block;
        letter-spacing: 0.5px;
        line-height: 1.5rem;
        opacity: 0.8;
      }
      .share {
        height: 2.5rem;
        width: 2.5rem;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        background-color: #ff1f10;
        background-image: none;
        mask: url(//storage.360buyimg.com/tower/babelnode/static/media/i-miaosha-red.e6c30bae.png)
          no-repeat;
        mask-size: 100% 100%;
        display: none;
      }
      .price-title {
        color: #fff;
        transform: scale(0.7);
      }
      .price-christmas {
        font-size: 1.4rem;
      }
      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
      }
      .yuan {
        margin: 1.2rem 0.1rem 0;
        display: block;
        transform: scale(0.8);
        z-index:100
      }
    }
  }
}
</style>